<script lang="ts" setup name="Merchant">
import { CirclePlus, EditPen, Refresh } from '@element-plus/icons-vue'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { StoreManagement } from '~/src/api/interface/storeManagement'
import { createMerchantAPI, editMerchantAPI, getMerchantAPI } from '~/src/api/storeManagement'
import { resetPasswordAPI } from '~/src/api/user'
import { formatDate } from '~/src/utils/date-formatter'
import ByGroupDialog from '../components/ByGroupDialog.vue'
import MerchantDialog from '../components/MerchantDialog.vue'
import { merchantColumns } from './info/column'

const createData = ref({
  isCreateFacCode: false,
  passWord: '',
  createCount: 1,
  endDate: formatDate(366, 'start', 'yyyy-MM-dd'),
})
const proTableRef = ref<ProTableInstance>()
const byGroupDialogRef = ref<InstanceType<typeof ByGroupDialog> | null>(null)
const merchantDialogRef = ref<InstanceType<typeof MerchantDialog> | null>(null)
const openByGroupDialog = (title: string, data: Partial<StoreManagement.Merchant>) => {
  byGroupDialogRef.value?.acceptParams({
    title,
    data: { ...data },
    api: createMerchantAPI,
    getTableList: proTableRef.value?.getTableList,
  })
}
const openMerchantDialog = (data: Partial<StoreManagement.Merchant>) => {
  merchantDialogRef.value?.acceptParams({
    title: '商户资料',
    data: { ...data, isGroup: 1 },
    api: editMerchantAPI,
    getTableList: proTableRef.value?.getTableList,
  })
}
const resetPassword = async (data: Partial<StoreManagement.Merchant>) => {
  await useHandleData(resetPasswordAPI, { id: data.id }, `重置【${data.storeName}】密码`)
  proTableRef.value?.getTableList()
}
</script>

<template>
  <div class="auto-height-container">
    <pro-table ref="proTableRef" :columns="merchantColumns" :request-api="getMerchantAPI" row-key="id" title="商户列表">
      <template #tableHeader>
        <el-button v-auth="'add'" :icon="CirclePlus" type="primary" @click="openByGroupDialog('新增', createData)">新增商户</el-button>
      </template>
      <template #id="{ row }">
        <el-button v-auth="'edit'" :icon="EditPen" link type="primary" @click="openMerchantDialog(row)">{{ row.id }}</el-button>
      </template>
      <template #operation="scope">
        <el-button v-auth="'reSet'" :icon="Refresh" link type="primary" @click="resetPassword(scope.row)">重置密码</el-button>
      </template>
    </pro-table>
    <by-group-dialog ref="byGroupDialogRef" />
    <merchant-dialog ref="merchantDialogRef" />
  </div>
</template>

<style lang="scss" scoped></style>
